<template>
	<view class="lesson-container">
		<!-- 课程封面 + 标题 + 讲师信息 -->
		<view class="course-header">
			<image class="course-banner" :src="course.img" mode="aspectFill"></image>
			<view class="course-info">
				<text class="course-title">{{ course.title }}</text>
				<view class="teacher-info">
					<text class="teacher-name">{{ course.teacher }}</text>
					<text class="teacher-tag">&nbsp;&nbsp;|&nbsp;&nbsp;全栈工程师, 创业者</text>
				</view>
				<view class="rank-tag">
					<text class="rank-text">{{ course.rank }}&nbsp;> </text>
				</view>
				<view class="price-container">
					<text class="course-price">¥{{ course.price }}</text>
					<text class="refund-policy">{{ course.returnPolicy }}</text>
				</view>
			</view>
		</view>

		<view style="height: 180rpx;background-color: #fff;
		margin-bottom: 50rpx;margin-top: 28rpx;">
			<view style="display: 
			flex;justify-content: space-between;">
				<text style="margin-top: 33rpx;margin-left: 20rpx;color: gainsboro;">内容</text>
				<text style="margin-top: 30rpx;font-size: 30rpx;color: gray;">课程难度</text>
				<text style="margin-top: 30rpx;font-size: 30rpx;color: gray;">视频时长</text>
				<text style="margin-top: 30rpx;font-size: 30rpx;color: gray;">学习人数</text>
				<text style="margin-top: 30rpx;font-size: 30rpx;margin-right: 50rpx;
				color: gray;">课程评分</text>
			</view>
			<view style="display: 
			flex;justify-content: space-between;">
				<text style="margin-top: 30rpx;font-size: 30rpx;color: gray;margin-left: 115rpx;">进阶</text>
				<text style="margin-top: 30rpx;font-size: 30rpx;color: gray;">50小时</text>
				<text style="margin-top: 30rpx;font-size: 30rpx;color: gray;">97人</text>
				<text style="margin-top: 30rpx;font-size: 30rpx;margin-right: 50rpx;
				color: gray;">10.00分</text>
			</view>
		</view>

		<!-- 选项卡导航 -->
		<scroll-view class="tabs-container" scroll-x="true" show-scrollbar="false">
			<view class="tab-item" v-for="(tab, index) in tabs" :key="index" @click="handleTabChange(index)"
				:class="{ 'tab-active': activeTab === index }">
				{{ tab }}
				<view v-if="activeTab === index" class="tab-indicator"></view>
			</view>
		</scroll-view>

		<!-- 选项卡内容区（默认显示「简介」） -->
		<view class="tab-content">
			<view v-if="activeTab === 0" class="intro-content">
				<view class="module-card">
					<text class="module-title">全面覆盖NestJS核心技能</text>
					<text class="module-desc">全面涵盖动态模块、队列任务、缓存管理及权限校验等技术，从拔高到精通，快速掌握NestJS核心技能。</text>
				</view>
				<view class="module-card">
					<text class="module-title">构建高效稳定的服务端框架</text>
					<text class="module-desc">掌握大型复杂项目开发模式，构建高效、可扩展的服务端应用，晋升高效快速响应</text>
				</view>
			</view>
			<view v-else class="other-content">
				<text class="empty-tip">该模块内容待开发</text>
			</view>
		</view>

		<!-- 底部操作按钮 -->
		<view class="bottom-operate">
			<view class="operate-btn consult-btn" @click="handleConsult">
				<text class="btn-text">咨询</text>
			</view>
			<view class="operate-btn try-btn" @click="handleTry">
				<text class="btn-text">试看</text>
			</view>
			<view class="operate-btn cart-btn" @click="handleAddCart">
				<text class="btn-text">加入购物车</text>
			</view>
			<view class="operate-btn buy-btn" @click="handleBuy">
				<text class="btn-text">立即购买</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				course: {}, // 接收外部传递的课程数据
				tabs: ['简介', '目录', '评价', '套餐'], // 与截图一致的选项卡
				activeTab: 0 // 默认激活「简介」
			};
		},
		onLoad(options) {
			if (options.course) {
				// 从首页等页面传递课程数据
				this.course = JSON.parse(options.course);
			} else {
				// 兜底：还原截图中的 NestJS 课程数据
				this.course = {
					img: '/static/course_banner.png', // 替换为实际封面图路径（需确保图片存在）
					title: 'NestJS 从拔高到精通，大型复杂业务架构落地实践',
					teacher: 'Brian',
					rank: 'TOP 新课榜 第8名', // 匹配截图排名文案
					price: 699,
					returnPolicy: '7天未学可退'
				};
			}
		},
		methods: {
			handleTabChange(index) {
				this.activeTab = index;
			},
			handleConsult() {
				uni.showToast({ title: '咨询功能待开发', icon: 'none' });
			},
			handleTry() {
				uni.showToast({ title: '正在打开试看视频', icon: 'none' });
			},
			handleAddCart() {
				uni.showToast({ title: '已加入购物车', icon: 'success' });
			},
			handleBuy() {
				uni.showToast({ title: '正在跳转支付页', icon: 'none' });
			}
		}
	};
</script>

<style scoped>
	/* 全局容器 */
	.lesson-container {
		background-color: #f4f4f4;
		min-height: 100vh;
		padding-bottom: 120rpx; /* 底部按钮高度，避免遮挡 */
	}

	/* 课程头部：封面 + 文字信息 */
	.course-header {
		display: flex;
		align-items: flex-start; /* 封面与文字顶部对齐 */
		gap: 20rpx; /* 封面与文字间距 */
		margin: 24rpx;
		padding-top: 40rpx;
	}

	.course-banner {
		width: 200rpx;
		height: 280rpx; /* 匹配截图封面比例 */
		border-radius: 12rpx;
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.1);
	}

	.course-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.course-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
		line-height: 1.5;
		margin-bottom: 12rpx;
	}

	.teacher-info {
		display: flex;
		align-items: center;
		gap: 6rpx;
	}

	.teacher-name {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.teacher-tag {
		font-size: 24rpx;
		color: #666;
	}

	/* 排名 + 价格区域 */
	.rank-price {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 24rpx 24rpx;
	}

	.rank-tag {
		display: flex;
		align-items: center;
		background: #4fb48b; /* 纯绿色背景，匹配截图 */
		padding: 8rpx 14rpx;
		width: 200rpx;
		border-radius: 12rpx;
		margin: 14rpx 0;
	}

	.rank-text {
		font-size: 22rpx;
		color: #fff;
		font-weight: 500;
	}

	.price-container {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.course-price {
		font-size: 38rpx;
		color: #ff3e3e;
		font-weight: bold;
		margin-right: 10rpx;
	}

	.refund-policy {
		font-size: 22rpx;
		color: #07c160;
		border: 1px solid #07c160;
		border-radius: 4rpx;
		padding: 2rpx 6rpx;
		margin-top: 6rpx;
	}

	/* 选项卡导航 */
	.tabs-container {
		background: #fff;
		display: flex;
		white-space: nowrap;
		height: 88rpx;
		padding: 0 24rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.04);
		position: relative;
		bottom: 30rpx;
	}

	.tab-item {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		padding: 0 32rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		position: relative;
		height: 100%;
		justify-content: center;
		margin-left: 30rpx;
	}

	.tab-active {
		color: #ff3e3e;
		font-weight: bold;
	}

	.tab-indicator {
		width: 20rpx;
		height: 6rpx;
		background: #ff3e3e;
		border-radius: 3rpx;
		position: absolute;
		bottom: 0;
	}

	/* 选项卡内容区 */
	.tab-content {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin: 0 24rpx 20rpx;
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);
		height: 700rpx;
	}

	.module-card {
		background: #07c160; /* 绿色模块背景，匹配截图 */
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.module-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #fff;
		display: block;
		margin-bottom: 16rpx;
		text-align: left; /* 标题左对齐 */
	}

	.module-desc {
		font-size: 26rpx;
		color: #333;
		line-height: 1.6;
	
		padding: 20rpx;
		border-radius: 8rpx;
	}

	.other-content {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 300rpx;
	}

	.empty-tip {
		font-size: 28rpx;
		color: #999;
	}

	/* 底部操作按钮 */
	.bottom-operate {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		display: flex;
		padding: 16rpx 24rpx;
		box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.06);
	}

	.operate-btn {
		flex: 1;
		height: 90rpx;
		border-radius: 45rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 8rpx;
	}

	.btn-text {
		font-size: 30rpx;
		font-weight: 500;
	}

	.consult-btn {
		background: #f5f5f5;
	}

	.consult-btn .btn-text {
		color: #666;
	}

	.try-btn {
		background: #fff;
		border: 2rpx solid #ff5722;
	}

	.try-btn .btn-text {
		color: #ff5722;
	}

	.cart-btn {
		background: linear-gradient(90deg, #ffb042, #ff9522); /* 购物车按钮渐变，匹配截图 */
	}

	.cart-btn .btn-text {
		color: #fff;
	}

	.buy-btn {
		background: linear-gradient(90deg, #ff5f42, #ff3e22); /* 购买按钮渐变，匹配截图 */
	}

	.buy-btn .btn-text {
		color: #fff;
	}
</style>